<template>
  <div class="admin-container">
    <header class="admin-header">
      <nav class="admin-nav">
        <button v-for="(item, idx) in navItems" :key="idx" class="admin-nav-btn" @click="openSidebar(idx)">{{ item }}</button>
      </nav>
    </header>
    <div class="admin-content">
      <div class="admin-body">
        <aside v-if="sidebarVisible" class="admin-sidebar" @click.self="closeSidebar">
          <div class="sidebar-content">
            <ul>
              <button v-if="activeSidebar === 0" class="sidebar-btn" @click="showTravelList = true; getTravelList(1)">
                <img class="sidebar-icon" :src="vueLogo" alt="Vue" />
                <span>travel</span>
              </button>
            </ul>
          </div>
        </aside>
        <main class="admin-main travel-main">
          <template v-if="showTravelList">
            <form class="travel-filter" @submit.prevent="getTravelList(1)">
              <label>城市：<input v-model="travelFilter.city" placeholder="城市" /></label>
              <button type="submit" class="form-btn">查询</button>
            </form>
            <div class="travel-table-wrapper full-width">
              <table class="travel-table">
                <thead>
                  <tr>
                    <th>省份</th>
                    <th>城市</th>
                    <th>城市代码</th>
                    <th>访问次数</th>
                    <th>首次访问时间</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in travelList" :key="item.cityCode">
                    <td>{{ item.province }}</td>
                    <td>{{ item.city }}</td>
                    <td>{{ item.cityCode }}</td>
                    <td>{{ item.visitCount }}</td>
                    <td>{{ item.firstTime }}</td>
                  </tr>
                  <tr v-if="travelList.length === 0">
                    <td colspan="5" style="text-align:center;color:#aaa;">暂无数据</td>
                  </tr>
                </tbody>
              </table>
              <div class="pagination">
                <button :disabled="travelPage === 1" @click="getTravelList(travelPage-1)">上一页</button>
                <span>第 {{ travelPage }} 页 / 共 {{ travelTotalPage }} 页</span>
                <button :disabled="travelPage === travelTotalPage" @click="getTravelList(travelPage+1)">下一页</button>
                <label class="page-size-label">每页条数：<input v-model.number="travelFilter.pageSize" type="number" min="1" style="width:60px;" @change="getTravelList(1)" /></label>
                <button class="form-btn cancel" @click="showTravelList = false">关闭</button>
              </div>
            </div>
          </template>
          <template v-else>
            <h2>欢迎进入管理后台</h2>
          </template>
        </main>
      </div>
    </div>
  </div>
</template>

<script>
import vueLogo from '@/assets/logo.svg'
export default {
  name: 'Admin',
  data() {
    return {
      vueLogo,
      navItems: ['我的', '用户', '订单', '报表', '设置'],
      sidebarVisible: false,
      activeSidebar: 0,
      showTravelList: false,
      travelList: [],
      travelPage: 1,
      travelTotalPage: 1,
      travelFilter: {
        city: '',
        page: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    openSidebar(idx) {
      this.activeSidebar = idx;
      this.sidebarVisible = true;
      this.showTravelList = false;
    },
    closeSidebar() {
      this.sidebarVisible = false;
      this.showTravelList = false;
    },
    async getTravelList(page) {
      this.travelPage = page;
      this.travelFilter.page = page;
      try {
        const res = await fetch('/api/travel/list', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(this.travelFilter)
        });
        if (res.ok) {
          const data = await res.json();
          const records = (data.data && data.data.records) ? data.data.records : [];
          this.travelList = records;
          this.travelTotalPage = (data.data && data.data.pages) ? data.data.pages : 1;
        } else {
          this.travelList = [];
          this.travelTotalPage = 1;
        }
      } catch (e) {
        this.travelList = [];
        this.travelTotalPage = 1;
      }
    }
  }
}
</script>

<style scoped>
.admin-container {
  min-height: 100vh;
  min-width: 100vw;
  width: 100vw;
  height: 100vh;
  background: #F7F8FA;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.admin-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 64px;
  background: #E5F0FF;
  color: #007AFF;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.08);
  padding: 0 32px;
  z-index: 200;
  box-sizing: border-box;
}
.admin-nav {
  display: flex;
  gap: 18px;
}
.admin-nav-btn {
  background: none;
  border: none;
  color: #007AFF;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.admin-nav-btn:hover {
  background: #D6E8FF;
  color: #0051A8;
}
.admin-content {
  position: absolute;
  top: 64px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 64px);
  background: #F7F8FA;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.admin-body {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
}
.admin-sidebar {
  width: 240px;
  height: 100%;
  background: #FFFFFF;
  border-right: 1px solid #E5EEF9;
  box-shadow: 2px 0 8px rgba(0, 122, 255, 0.04);
  z-index: 100;
  animation: sidebar-in 0.2s;
  display: flex;
  flex-direction: column;
}
@keyframes sidebar-in {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.sidebar-content {
  padding: 16px 12px;
}
.sidebar-content h3 {
  color: #007AFF;
  margin-bottom: 18px;
}
.sidebar-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-content li {
  padding: 8px 0;
  color: #007AFF;
}
.admin-main {
  flex: 1;
  padding: 48px 32px;
  min-width: 0;
  min-height: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  background: #F7F8FA;
}
.sidebar-btn {
  background: transparent;
  border: none;
  color: #334155;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  margin-top: 2px;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-btn:hover {
  background: #F1F5FF;
  color: #0A4DAD;
}
.sidebar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #94BFFF inset;
}
.sidebar-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}
.travel-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 400px;
  margin: 32px auto 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,122,255,0.08);
  padding: 32px 24px;
}
.travel-form label {
  color: #222;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.travel-form input {
  border: 1px solid #E5F0FF;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1rem;
  outline: none;
  transition: border 0.2s;
}
.travel-form input:focus {
  border: 1.5px solid #007AFF;
}
.form-btn {
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 0;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.18s;
}
.form-btn:hover {
  background: #0051A8;
}
.form-btn.cancel {
  background: #E5F0FF;
  color: #007AFF;
  margin-left: 8px;
}
.form-btn.cancel:hover {
  background: #d0e6fa;
  color: #0051A8;
}
.travel-table-wrapper {
  margin: 32px auto 0 auto;
  max-width: 600px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,122,255,0.08);
  padding: 32px 24px;
}
.travel-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  font-size: 1rem;
}
.travel-table th, .travel-table td {
  border-bottom: 1px solid #E5F0FF;
  padding: 12px 8px;
  text-align: center;
  color: #222;
  font-size: 1rem;
}
.travel-table th {
  background: #F7F8FA;
  color: #007AFF;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 1px;
}
.travel-table tr:last-child td {
  border-bottom: none;
}
.pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 8px;
  font-size: 1rem;
  color: #222;
}
.pagination button {
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 18px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s;
}
.pagination button:disabled {
  background: #E5F0FF;
  color: #aaa;
  cursor: not-allowed;
}
.pagination .cancel {
  background: #E5F0FF;
  color: #007AFF;
}
.pagination .cancel:hover {
  background: #d0e6fa;
  color: #0051A8;
}
.travel-main {
  width: 100%;
  min-height: 100%;
  padding: 0;
  background: #F7F8FA;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color: #222;
}
.travel-main h2 {
  color: #007AFF;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 32px 0 0 24px;
  letter-spacing: 1px;
}
.travel-filter {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 24px 0 0 0;
  padding: 0 24px;
}
.travel-filter label {
  color: #222;
  font-size: 1rem;
}
.travel-filter input {
  border: 1px solid #E5F0FF;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 1rem;
  outline: none;
  transition: border 0.2s;
  margin-left: 6px;
  color: #222;
  background: #fff;
}
.travel-filter input:focus {
  border: 1.5px solid #007AFF;
}
.travel-table-wrapper.full-width {
  width: 100%;
  max-width: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
  padding: 0 24px 32px 24px;
  background: transparent;
}
.page-size-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  color: #222;
}
.page-size-label input {
  border: 1px solid #E5F0FF;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 1rem;
  width: 60px;
  margin-left: 2px;
}
</style> 